<template>
  <div>
    <div v-for="(v,i) in val" :key="i" class="mb10 flx-s">
      <a-input class="mr10" placeholder="key" v-model.trim="v.key"></a-input>
      <a-input class="mr10" placeholder="value" v-model.trim="v.value"></a-input>
      <a-button class="mr10" @click="plus(i)"><i class="fa fa-plus"/></a-button>
      <a-button @click="minus(i)"><i class="fa fa-minus"/></a-button>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      val: []
    }
  },
  mounted () {
    this.val = this.modelVal
    if (this.val.length === 0) {
      this.val.push({ key: '', value: '' })
    }
  },
  watch: {
    modelVal (v) {
      this.val = v
    },
    val (v) {
      this.$emit('change', v)
    }
  },
  methods: {
    plus (i) {
      this.val.splice(i + 1, 0, { key: '', value: '' })
    },
    minus (i) {
      if (this.val.length === 1) {
        this.$warning({ title: '至少保留一条记录' })
        return
      }
      this.val.splice(i, 1)
    },
    validate () {
      return !this.val.some(t => {
        return t.key.length === 0 || t.value.length === 0
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
